<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小虎队水果店首页</title>
<style type="text/css">
	.top{
		width:100%;
		height:80px;
		background-color:gray;
		padding-bottom: 10px;
	}
	.top1{
		width:40%;
		height:80px;
		float:left;	
		padding-bottom: 10px;
	}
	.top2{
		width:20%;
		height:80px;
		float:left;	
		padding-bottom: 10px;
	}
	.top3{
		width:20%;
		height:80px;
		float:left;	
		padding-bottom: 10px;
	}
	.top4{
		width:20%;
		height:80px;
		float:left;	
		padding-bottom: 10px;
	}
	#left{
		width:20%;
		height:520px;
		float:left;
	    background:rgb(254,238,189) url(image/5.png);
		background-size:contain;
		background-repeat:no-repeat; 
		background-position:100% 50%;
	}
	#mid{
		width:80%;
		height:520px;
		float:left;
		position:relative;
		margin:0 auto;
		padding:0;
		overflow:hidden;
	}
	#mid ul{
		list-style: none;
   	 	margin: 0;
    	padding: 0;
    	position: absolute;
    	width: 100%;
	}
	#mid ul li{
		float: left;
    	margin: 0;
   	 	padding: 0;
	}
	#mid ul li img{
		width: 100%;
   	 	height: 520px;
	}
	#right{
		width:20%;
		height:520px;
		float:left;	
	}
	.bottom{
		width:100%;
		height:100px;
		margin-top: 520px; 
		background: rgb(254,238,189);
	}
	h2{
	color:blue;
	}
	p{
	color:blue;
	}
	a{
	text-decoration:none;
	}
</style>
<script type="text/javascript">
	window.onload=function(){  
	var oDiv = document.getElementById('mid');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var Li = oUl.getElementsByTagName('li');
	oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
	oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度
	var speed = 2
	function move(){ 
	if(oUl.offsetLeft<-oUl.offsetWidth/speed){    
	oUl.style.left = '0'
	}
	if(oUl.offsetLeft>0){  
	oUl.style.left = -oUl.offsetWidth/speed+'px';
	}
	oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动
	}
	var timer = setInterval(move,30)//速度
	oDiv.onmouseover=function(){ 
	clearInterval(timer);

	}
	oDiv.onmouseout=function(){   
		timer = setInterval(move,30)
	}
	}
</script>
</head>
<body>
	<div class="top">
		<div class="top1">
			<h1 align="center">小虎队水果商店</h1>
		</div>
		<div class="top2">
			<h2 align="center"><a href="SalerLogin.jsp">登录后台</a></h2>
		</div>
		<div class="top3">
			<h2 align="center" valign="middle"><a href="CheckFruits.jsp">查看水果</a></h2>
		</div>
		<div class="top4">
			<h2 align="center" valign="middle"><a href="LearnMore.jsp">关于我们</a></h2>
		</div>
	</div>
	
	<div id="left">
		<h2 align="center" valign="middle"><a href="Jijie.jsp">今日推荐</a></h2>
	</div>
	<div id="mid">
		<ul>
			<li><img src="image/1.webp"></li>
			<li><img src="image/2.webp"></li>
			<li><img src="image/3.webp"></li>
			<li><img src="image/4.webp"></li>
		</ul>
	</div>
	<!--
	<div id="right" style="background: rgb(254,238,189);">
		
	</div> 
	-->
	<div class="bottom">
	<h2 align="center">为什么要吃水果呢？</h2>
		<p align="center">吃水果可以帮助我们美容养颜、减缓衰老、预防疾病、降血压、减肥瘦身哦。</p>
	</div>
</body>
</html>